<template>
    <div class="trCard superCard">
        <span style="font-weight: bold;font-size: 16px;color: rgb(20, 144, 255);">中英快捷翻译
            <button @click="f" class="trBtn">翻译</button>
        </span>
        <div>
            <input type="text" v-model="y" class="trInput" :style="{ width: `calc(100% - ${y ? 24 : 12}px)` }"
                placeholder="请输入文本内容">
            <svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em"
                fill="rgb(20, 144, 255)" aria-hidden="true" v-show="!!yAsync" @click="clear">
                <path
                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z">
                </path>
            </svg>
        </div>
        <div>{{ re }}</div>
    </div>
</template>

<script setup>
import otherApi from "@/api/other.js"
import { ref, watch } from "vue"
import superCard from "../superCard.vue"
let y = ref(""), re = ref(''), yAsync = ref(""), btnShow = ref(true)
async function f() {
    if (!y.value) return
    let { data } = await otherApi.getFanyi(y.value)
    re.value = data.data
}
function clear() {
    y.value = re.value = ""
}
watch(y, (n) => {
    n == "" ? yAsync.value = "" : setTimeout(() => yAsync.value = y.value, 300)
})
</script>

<style scoped>
.trCard {
    display: flex;
    flex-direction: column;
    padding: 10px;
    overflow: auto;
    height: 100%;
    box-sizing: border-box;
}

.trInput {
    width: calc(100% - 40px);
    border: 0;
    border-bottom: 1px solid #ccc;
    height: 30px;
    outline: none;
    transition: all 0.3s;
}

.trInput:focus {
    border-bottom: 1px solid rgb(20, 144, 255);
}

.trBtn {
    width: 60px;
    border: 0;
    color: #fff;
    background: rgb(20, 144, 255);
    margin-top: 4px;
    padding: 2px 0;
}

.superCard {
    grid-column-start: auto;
    grid-column-end: span 2;
    grid-row-start: auto;
    grid-row-end: span 2;
    background-color: white;
    border-radius: 12px;
    /* aspect-ratio: 1 / 1;  */
}
</style>